<template>
  <Modal
  	class="m-prompt-wp"
    v-model:visible="_d.visible"
    width="416px"
    :footer="false">
    <div class="title">
    	<ExclamationCircleOutlined class="icon"/>
    	<span class="text">提示</span>
    </div>
    <div class="content">
    	<Form>
    		<FormItem v-bind="validateInfos.value">
    			<Input v-model:value="_d.form.value" :placeholder="props.placeholder" allowClear></Input>
    		</FormItem>
    	</Form>
    </div>
    <div class="footer">
    	<Button class="cancel" @click="_d.visible = false">取消</Button>
    	<Button class="ok" type="primary" @click="handleOk()">确定</Button>
    </div>
  </Modal>
</template>

<script setup>
	import { reactive, ref, onMounted, watch, getCurrentInstance } from 'vue'
	import {Modal, Button, Form, FormItem, Input} from "ant-design-vue";
	import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

	// 获取app对象
  const instance = getCurrentInstance();
  const app = instance.appContext.app;

	const props = defineProps({
		placeholder: {
			type: String,
			default: '请输入'
		},
		// 验证 - 验证之后返回提示message
		check: {
			type: Function
		},
		// 确认
		onOk: {
			type: Function
		},
		// 隐藏
		hide: {
			type: Function
		}
	})

	const _d = reactive({
		visible: false,

		form: {
			value: '',
		},

		rules: {
			value: [
				{ validator: async (_rule, value) => {
					if(props.check) {
						let msg = props.check(value);
						if(msg) {
							return Promise.reject(msg);
						}
					}
					return Promise.resolve();
				}, trigger: 'blur'}
			]
		}
	})

	// 验证
	const { resetFields, validate, validateInfos } = Form.useForm(_d.form, _d.rules);

	// 移除组件
	watch(() => _d.visible, (val) => {
		if(!val) {
			setTimeout(() => {
				app.unmount();
			}, 300);
		}
	})

	const open = () => {
		_d.visible = true;
	}

	const handleOk = () => {
		validate().then(() => {
			if(props.onOk) {
				props.onOk(_d.form.value);
			}
			_d.visible = false;
		})
	}

	defineExpose({
		open
	})

</script>
<style lang="less">
.m-prompt-wp {
	.ant-modal-body {
		padding: 32px 32px 24px;
	}
	
	.title {
		.icon {
			float: left;
			margin-right: 16px;
			font-size: 22px;
			color: #FAAD14;
		}
		.text {
	    display: block;
	    overflow: hidden;
	    color: #000000d9;
	    font-weight: 500;
	    font-size: 16px;
	    line-height: 1.4;
		}
	}
	.content {
		margin-top: 8px;
		margin-left: 38px;
	}
	.footer {
		text-align: right;
		.cancel {
			margin-right: 10px;
		}
	}

	.ant-modal-close {
		display: none;
	}
}
</style>